<template>
  <!-- 发送验证码按钮组件 -->
  <view class="send_message_comp">
    <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange" :start-text="this.startText" :change-text="changeText"></u-verification-code>
    <button class="btn" :class="canGetCode ?'' : 'btn_disabled'" @click="sendMessage">{{tips}}</button>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    sendType: { // 获取验证码接口类型，register注册接口
      type: String,
      default: 'register'
    },
    phone: {
      type: String,
      default: ''
    },
    seconds: { // 倒计时长
      type: Number,
      default: 60
    },
  },
  data() {
    return {
      tips: '', // 视图层按钮提示文字
      canGetCode: true, // 当前是否允许获取验证码
      startText: '立即发送',
      changeText: '重新发送 (X)', // 倒计时期间的提示语，必须带有字母"X"
    };
  },
  computed:{
  },
  created() {},
  methods: {
    sendMessage() {
      console.log(this.phone);
      if(!this.phone || !/^1[3456789]\d{9}$/.test(this.phone)){
        uni.showToast({
          icon: 'none',
          title: '请输入正确的手机号码',
        })
        return
      }
      if (this.$refs.uCode.canGetCode) { // 允许发送验证码
      
        if(this.sendType === 'register'){ // 注册
          this.getRegisterCode()
        }
      }
    },
    end() {
      // 倒计时结束
      this.canGetCode = true
    },
    start() {
      // 倒计时开始
      this.canGetCode = false
    },
    codeChange(text) {
      this.tips = text;
    },
    getRegisterCode(){
      // 获取注册手机短信二维码
      uni.showToast({
        icon: 'none',
        title: '验证码发送成功，请注意查收'
      });
      this.$refs.uCode.start();
    },
  }
};
</script>

<style scoped lang="scss">
.send_message_comp {
  display: inline-block;
  vertical-align: middle;
  .btn {
    display: block;
    border-radius: 8rpx;
    border: 1px solid #c40000;
    font-size: 21rpx;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #c40000;
  }
  .btn_disabled {
    border: 1px solid #9d9d9d;
    color: #9d9d9d;
  }
}
</style>
